<template>
  <div :id="echarts" :style="getheight"></div>
</template>
<script>
export default {
  name: 'pie',
  mixins: [],
  computed: {
    echarts() {
      return 'echarts' + Math.random() * 100000
    },
    getheight() {
      return `height:${this.height}px`
    }
  },
  props: {
    chartData: {
      type: Array,
      default: () => []
    },
    title: {
      type: String,
      default: ''
    },
    height: {
      type: Number,
      default: 150
    },
    color: {
      type: Array,
      default: () => [
        '#00ffff',
        '#00cfff',
        '#006ced',
        '#ffe000',
        '#ffa800',
        '#ff5b00',
        '#ff3000'
      ]
    }
  },
  watch: {
    chartData() {
      this.draw()
    }
  },
  data() {
    return {
      option: {
        color: this.color,
        title: {
          text: '交通方式',
          top: '44%',
          textAlign: 'center',
          left: '48%',
          textStyle: {
            color: '#fff',
            fontSize: 20,
            fontWeight: '400'
          }
        },
        graphic: {
          elements: [
            {
              type: 'image',
              z: 3,
              style: {
                image:
                  '',
                width: 120,
                height: 120
              },
              left: 'center',
              top: 'center',
              position: [100, 100]
            }
          ]
        },
        tooltip: {
          show: false
        },
        legend: {
          icon: 'circle',
          orient: 'horizontal',
          // x: 'left',
          data: ['火车', '飞机', '客车', '轮渡'],
          right: 0,
          bottom: 0,
          align: 'right',
          textStyle: {
            color: '#fff'
          },
          itemGap: 20
        },
        toolbox: {
          show: false
        },
        series: [
          {
            name: this.title,
            type: 'pie',
            clockWise: false,
            radius: ['66%', '68%'],
            center: ['50%', '50%'],
            hoverAnimation: false,

            data: []
          }
        ]
      }
    }
  },
  mounted() {
    this.draw()
  },
  methods: {
    draw() {
      const chartFactor = this.$echarts.init(
        document.getElementById(this.echarts)
      )
      let total = this.chartData.reduce((cur, prev) => {
        return cur + prev.value
      }, 0)
      let itemStyle = {
        normal: {
          label: {
            show: true,
            position: 'outside',
            color: '#ddd',
            formatter: params => {
              let percent = ((params.value / total) * 100).toFixed(0)
              if (params.name != '') {
                return params.name + '\n{white|' + '占比' + percent + '%}'
              } else {
                return ''
              }
            },
            rich: {
              white: {
                color: '#ddd',
                align: 'center',
                padding: [3, 0]
              }
            }
          },
          labelLine: {
            length: 30,
            length2: 100,
            show: true,
            color: '#00ffff'
          }
        }
      }
      this.option.series[0].itemStyle = itemStyle
      this.option.series[0].data = this.dealData(this.chartData)
      chartFactor.setOption(this.option)
    },
    dealData(data) {
      let ret = []
      for (const i in data) {
        ret.push(
          {
            value: data[i].value,
            name: data[i].name,
            itemStyle: {
              normal: {
                borderWidth: 5,
                shadowBlur: 20,
                borderColor: this.color[i],
                shadowColor: this.color[i]
              }
            }
          },
          {
            value: 2,
            name: '',
            itemStyle: {
              normal: {
                label: {
                  show: false
                },
                labelLine: {
                  show: false
                },
                color: 'rgba(0, 0, 0, 0)',
                borderColor: 'rgba(0, 0, 0, 0)',
                borderWidth: 0
              }
            }
          }
        )
      }
      return ret
    }
  }
}
</script>
